﻿@{
    ViewBag.Title = "部门管理";
    Layout = "~/Views/Shared/_Index.cshtml";
} 
@using Raffles.OA.Utility 
<link href="~/Content/plugin/jquery-treegrid/jquery.treegrid.min.css" rel="stylesheet" />
<link href="~/Content/plugin/jquery-treegrid/table.css" rel="stylesheet" />
<style>
    #toolbar {
        margin-top: 10px;
        margin-bottom: 10px
    }
    .bootstrap-table .fixed-table-container .table {
        width: 100%;
        margin-bottom: 20px !important;
    }
</style>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box box-info">
                <div class="box-body">
                    <div class="table-responsive">
                        <div class="btn-group-sm" id="toolbar" role="group">
                            <a id="btnAdd" authorize="yes" class="btn btn-success" onclick="pageUI.showForm('')"><i class="fa fa-plus"></i> 新增</a>
                            <a id="btnExpandAll" class="btn btn-info" onclick="pageUI.nodeExpand()"><i class="fa fa-exchange"></i> 展开/折叠</a>
                        </div>
                        <table id="table" class="table table-hover table-striped text-nowrap">
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div> 
</section> 
<script src="~/Content/plugin/bootstrap.table/1.12.0/bootstrap-table-treegrid.js"></script>
<script src="~/Content/plugin/jquery-treegrid/jquery.treegrid.min.js"></script>
<script type="text/javascript">
    var pageUI = {
        expandMark: false,
        getTreeData: function () {
            var _self = pageUI;
            frame.ajax({
                url: '@Url.Content("/Manage/Department/GetTreeData")',
                type: "get",
                success: function (result) {
                    if (result.success) {
                        var data = result.data;
                        _self.bindTableData(data);
                    }
                    else {
                        frame.msgError(result.message);
                    }
                }
            });
        },
        bindTableData: function (data) {
            var $table = $('#table');
            var _self = pageUI;
            $table.bootstrapTable({
                data: data,
                idField: 'id',
                dataType: 'jsonp',
                columns: [
                    {
                        field: 'Name',
                        halign: 'center',
                        align: 'center',
                        title: '部门名称',
                        formatter: function (value, row, index) {
                            if (frame.isNullOrEmpty(row.Icon)) {
                                return row.Name;
                            } else {
                                return '<i class="' + row.Icon + '"></i> <span class="nav-label">' + row.Name + '</span>';
                            }
                        }
                    }, 
                    {
                        field: 'DisplayOrder',
                        halign: 'center',
                        align: 'center',
                        title: '显示顺序'
                    },
                    {
                        field: 'operate',
                        title: '操作',
                        align: 'center',
                        events: {
                            'click .delete': function (e, value, row, index) {
                                _self.deleleNode(row.id);
                            }
                        },
                        formatter: function (value, row, index) {
                            return [
                                '<a href="javascript:void(0);" class="btn btn-primary btn-xs" onclick="pageUI.showForm(' + row.id + ')"><i class="fa fa-edit" ></i> 编辑</a> ',
                                '<a href="javascript:void(0);" class="delete btn btn-danger btn-xs"><i class="fa fa-trash-o" ></i> 删除</a>'
                            ].join('');
                        }
                    },
                ],
                treeShowField: 'Name',
                parentIdField: 'pId',
                onResetView: function () {
                    $table.treegrid({
                        initialState: 'collapsed',
                        treeColumn: 0,
                        onChange: function () {
                            $table.bootstrapTable('resetWidth');
                        }
                    }); 
                    $table.treegrid('getRootNodes').treegrid('collapse');
                }
            });
        },
        deleleNode: function (id) {
            frame.confirm("确定要删除该部门吗？", function () {
                frame.ajax({
                    url: '@Url.Content("/Manage/Department/DeleteData")' + '?id=' + id,
                    type: "post",
                    success: function (obj) {
                        if (obj.success) {
                            frame.msgSuccess(obj.message);
                            location.reload();
                        }
                        else {
                            frame.msgError(obj.message);
                        }
                    }
                });
            });
        },
        showForm: function (id) {
            frame.openDialog({
                title: !!id ? '编辑部门' : '新增部门',
                content: '@Url.Content("/Manage/Department/Form")' + '?id=' + id,
                width: "480px",
                height: "380px",
                callback: function (index, layero) {
                    var iframeWin = window[layero.find('iframe')[0]['name']];
                    iframeWin.saveForm();
                }
            });
        },
        nodeExpand: function () {
            var _self = pageUI;
            var e = $('#collapse').find("i");
            e.toggleClass("fa-chevron-up").toggleClass("fa-chevron-down");
            if (e.attr('class') == 'fa fa-chevron-up') {
                e.text(' 折叠');
            } else {
                e.text(' 展开');
            }
            var $table = $('#table');
            if (_self.expandMark) {
                $table.treegrid('collapseAll')
                _self.expandMark = false;
            }
            else {
                $table.treegrid('expandAll')
                _self.expandMark = true;
            }
        },
        Init: function () {
            var _self = pageUI;
            _self.getTreeData();
        }
    }
    pageUI.Init();
</script> 